/*#localTime {*/
/*    position: fixed; !* 固定位置，不随页面滚动而移动 *!*/
/*    top: 0; !* 位于页面顶部 *!*/
/*    width: 100%; !* 宽度占满容器 *!*/
/*    background-color: #f8f9fa; !* 背景颜色，根据需要调整 *!*/
/*    z-index: 1000; !* 确保它在页面上的其他元素之上 *!*/
/*    padding: 10px 0; !* 添加一些内填充 *!*/
/*    box-shadow: 0 2px 4px rgba(0,0,0,0.1); !* 添加一些阴影以获得更好的视觉效果 *!*/
/*    text-align: center; !* 文本居中显示 *!*/
/*}*/


body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    background-color: #f0f0f0;
}

/*body {*/
/*    padding-top: 50px; !* 根据 #localTime 的实际高度调整 *!*/
/*}*/

#localTime {
    /*position: fixed;*/
    top: 0;
    width: 100%;
    background-color: #f8f9fa;
    z-index: 1000;
    padding: 10px 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    text-align: center;
}

.gallery {
    display: flex;
    flex-direction: column; /* 设置主轴方向为垂直 */
    align-items: center; /* 中心对齐所有内容 */
    margin-top: 20px;
}

.image-container {
    display: flex;
    flex-wrap: wrap; /* 允许内容换行 */
    justify-content: center; /* 水平居中 */
    margin-bottom: 20px; /* 图像间隔 */
    width: 100%; /* 容器宽度 */
}

.image-container img {
    width: 19%; /* 每张图像占据行宽的大约20% */
    margin: 0.5%; /* 提供一点空间防止挤压 */
    height: auto; /* 高度自动调整 */
}

.image-caption {
    width: 100%; /* 宽度占满容器 */
    background-color: rgba(0, 0, 0, 0.7); /* 半透明黑色背景 */
    color: white; /* 文字颜色 */
    text-align: center; /* 文本居中 */
    padding: 5px 0; /* 填充 */
    font-size: 16px; /* 字体大小 */
    margin-bottom: 5px; /* 与图片的间隔 */
}


.skyobs {
    background-color: #a2cff0; /* Light blue background for sky observation images */
}

.track {
    background-color: #f0e6a2; /* Light yellow background for track images */
}

.alt {
    background-color: #a2f0b9; /* Light green background for altitude images */
}

/*img {*/
/*    width: 100%; !* 图像宽度占满容器 *!*/
/*    height: auto; !* 高度自动 *!*/
/*    display: block; !* 防止底部出现空隙 *!*/
/*}*/

.gallery img {
    height: 100%; /* 高度自动调整以保持图片比例 */
    max-height: 20vh; /* 设置最大高度，根据屏幕高度的百分比调整 */
    width: 100%; /* 使图片宽度自动填满容器宽度 */
    /*object-fit: cover; !* 保持图片的宽高比 *!*/
    object-fit: contain; /* 图片尽可能大地填充容器，不裁剪，可能留有空白 */
}

/* 媒体查询，对不同屏幕尺寸做进一步的样式调整 */
@media (max-width: 768px) {
    .gallery {
        grid-template-columns: repeat(2, 1fr); /* 对于较小屏幕，每行显示2个图像 */
    }
    .gallery img {
        max-height: 25vh; /* 在较小屏幕上增加最大高度，以提高显示效果 */
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .gallery {
        grid-template-columns: repeat(5, 1fr); /* 对于中等屏幕，每行显示5个图像 */
    }
}
